<template>
<div class="tab-content-wrapper">
  <MyNavBar></MyNavBar>
  <van-sticky>
    <div class="tabwrapper">
      <!-- 当路由为/film/nowPlaying时 会加载子组件NowPlaying到当前组件的RouterView中 -->
      <RouterLink active-class="active" class="tab" to="/film/nowPlaying">
        <span>正在热映</span>
      </RouterLink>

      <!-- 当路由为/film/comingSoon时 会加载子组件ComingSoon到当前组件的RouterView中 -->
      <RouterLink active-class="active" class="tab" to="/film/comingSoon">
        <span>即将上映</span>
      </RouterLink>
    </div>
  </van-sticky>
    <!-- 目标组件的承载容器 -->
    <RouterView />
  </div>
</template>
  <script>
  import MyNavBar from "../components/MyNavBar.vue";
export default {
  components: {
      MyNavBar,
   },
 data() {
    return {
      playings: [],
      err: null,
        
    }
 }
};
</script>
  <style lang="scss" scoped>
.tabwrapper {
  display: flex;
  border-bottom: 1px solid #eee;
  opacity: 999;
  background-color: white;
  .tab {
    flex-grow: 1;
    height: 49px;
    line-height: 49px;
    text-align: center;
    position: relative;
  }
}
.tab.active::after{
  content: '';
  width: 34px;
  height: 5px;
  background-color: crimson;
  position: absolute;
  bottom: 0px;
  padding-left: 28px;
  margin-left: -63px;
}
</style>
  